﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
<div class="container-div" id="deviceManage_WashMachine-vue">
    <el-row>
        <el-col :span="10">
            <el-card>
                <div slot="header" class="myhead">
                    <div>清洗机数据</div>
                </div>
                <div>
                    <div class="my-p">
                        <div class="my-p-l">状态</div>
                        <div class="my-p-r">{{ washData.status }}</div>
                    </div>
                    <div class="my-p">
                        <div class="my-p-l">当前报警</div>
                        <div class="my-p-r">{{ washData.alarm }}</div>
                    </div>
                    <div class="my-p">
                        <div class="my-p-l">当前清洗工件</div>
                        <div class="my-p-r">{{ washData.mCode }}</div>
                    </div>
                    <div class="my-p">
                        <div class="my-p-l">清洗时间</div>
                        <div class="my-p-r">{{ washData.washTime }} 分钟</div>
                    </div>
                    <div class="my-p">
                        <div class="my-p-l">清洗转速</div>
                        <div class="my-p-r">{{ washData.washSpeed }} 度/秒</div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>   
</div>

<script>
    let app = new Vue({
        el: "#deviceManage_WashMachine-vue",
        data: {
            washData: {
                status: null,
                alarm: null,
                mCode: null,
                washTime: null,
                washSpeed: null
            }
        },
        methods: {
            // 获取设备当天的历史状态信息
            GetTodayData() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetWashData")'
                axios.get(url).then(res => {
                    console.log(res)
                    let result = res.data;
                    if (result != null) {
                        if (result.MStatus != null && result.MStatus[2]) {
                            this.washData.status = "运行"
                        } else {
                            if (result.Ready) {
                                this.washData.status = "准备"
                            } else {
                                this.washData.status = "未准备好"
                            }
                        }
                        this.washData.mCode = result.MCode;
                        this.washData.washTime = result.WashTime;
                        this.washData.washSpeed = result.WashSpeed;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        },
        mounted() {
            this.GetTodayData();
            setInterval(() => {
                this.GetTodayData();
            },2000)
        }
    })
</script>

